<template>
  <div class="invoice">
    <div class="excel">
      <h2>项目组__12__月份加班考勤表（加班至晚9点以后）</h2>
    </div>
    <el-button
      @click="downloadExl(jsono)"
      style="margin: 10px 0; background: #b52636; color: #fff"
      >导出</el-button
    >
  </div>
</template>

<script>
import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import style from "../style";
export default {
  data() {
    return {
      invoce_data: { project_name: "190777-53#12月加班费用报销明细表2" },
      wopts: {
        bookType: "xlsx",
        bookSST: true,
        type: "binary",
        cellStyles: true,
      },
      jsono: [
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "客户简称：",
          列头2: "邮储行",
          列头3: "",
          列头4: "项目号：",
          列头5: "190777-53",
          列头6: "",
          列头7: "",
          列头8: "",
          列头9: "",
          列头10: "",
          列头11: "",
          列头12: "",
          列头13: "",
          列头14: "",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "客户简称：",
          列头2: "邮储行",
          列头3: "",
          列头4: "项目号：",
          列头5: "190777-53",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "客户简称：",
          列头2: "邮储行",
          列头3: "",
          列头4: "项目号：",
          列头5: "190777-53",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "项目经理签字",
          列头6: "分软经理签字",
          列头11: "客户签字",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "日期",
          列头2: "星期",
          列头3: "合计人数",
          列头4: "合计金额",
          列头5: "加班人员名单",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "2020/11/21",
          列头2: "星期六",
          列头3: "=COUNTA(E8:N10)",
          列头4: "=C8*20",
          列头5: "褚耀文",
          列头6: "宿艳萍",
          列头7: "王丁",
          列头8: "王新禹",
          列头9: "周保坤",
          列头10: "周保坤",
          列头11: "周保坤",
          列头12: "周保坤",
          列头13: "周保坤",
          列头14: "周保坤",
        },
        {
          "项目组__12__月份加班考勤表（加班至晚9点以后）": "",
          列头2: "星期日",
          列头3: "=COUNTA(E8:N10)",
          列头4: "=C8*20",
          列头5: "陈鑫磊",
          列头6: "陈鑫磊",
          列头7: "陈鑫磊",
          列头8: "王新禹",
          列头9: "周保坤",
          列头10: "周保坤",
          列头11: "周保坤",
          列头12: "周保坤",
          列头13: "陈鑫磊",
          列头14: "陈鑫磊",
        },
      ],
    };
  },
  methods: {
    downloadExl(json, type) {
      var tmpdata = json[0];
      json.unshift({});
      var keyMap = []; //获取keys
      for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
      }
      var tmpdata = []; //用来保存转换好的json
      json
        .map((v, i) =>
          keyMap.map((k, j) =>
            Object.assign(
              {},
              {
                v: v[k],
                position:
                  (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) +
                  (i + 1),
              }
            )
          )
        )
        .reduce((prev, next) => prev.concat(next))
        .forEach(
          (v, i) =>
            (tmpdata[v.position] = {
              v: v.v,
            })
        );

      var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
      console.log(tmpdata);

      tmpdata["!merges"] = style.merges; //设置单元格合并
      tmpdata["A1"].s = style.title;
      tmpdata["A4"].s = tmpdata["B4"].s = tmpdata["D4"].s = tmpdata["E4"].s =
        style.font1;
      tmpdata["A5"].s = tmpdata["F5"].s = tmpdata["K5"].s = style.font2;
      tmpdata["A7"].s = tmpdata["B7"].s = tmpdata["C7"].s = tmpdata[
        "D7"
      ].s = tmpdata["E7"].s = style.font3;
      var tmpWB = {
        SheetNames: ["加班餐费的具体加班几天名单"], //保存的表标题
        Sheets: {
          加班餐费的具体加班几天名单: Object.assign(
            {},
            tmpdata, //内容
            {
              "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //设置填充区域
            }
          ),
        },
      };
      var tmpDown = new Blob(
        [
          this.s2ab(
            XLSXStyle.write(
              tmpWB,
              {
                bookType: type == undefined ? "xlsx" : type,
                bookSST: false,
                type: "binary",
              } //这里的数据是用来定义导出的格式类型
            )
          ),
        ],
        {
          type: "",
        }
      );
      this.saveAs(
        tmpDown,
        this.invoce_data.project_name +
          "." +
          (this.wopts.bookType == "biff2" ? "xls" : this.wopts.bookType)
      );
    },
    getCharCol(n) {
      (s = ""), (m = 0);
      while (n > 0) {
        m = (n % 26) + 1;
        s = String.fromCharCode(m + 64) + s;
        n = (n - m) / 26;
      }
      return s;
    },
    s2ab(s) {
      if (typeof ArrayBuffer !== "undefined") {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
    },
    saveAs(obj, fileName) {
      var tmpa = document.createElement("a");
      tmpa.download = fileName || "下载";
      tmpa.href = URL.createObjectURL(obj);
      tmpa.click();
      setTimeout(function () {
        URL.revokeObjectURL(obj);
      }, 100);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.invoice {
  .excel {
    width: 1200px;
    overflow: auto;
    h2 {
      width: 1200px;
      text-align: center;
    }
    table {
      td {
        text-align: center;
      }
    }
  }
}
</style>
